Design updates: hidden-sidebar chrome, chat-everywhere title bars, panel design pass#4932
Open
andresdjasso wants to merge 59 commits into
Open
Design updates: hidden-sidebar chrome, chat-everywhere title bars, panel design pass#4932andresdjasso wants to merge 59 commits into
andresdjasso wants to merge 59 commits into
Conversation
…ar, stationary panel toggle - Restructure the home input into a stacked card (grey tray behind the input) that hosts the All Chats launcher; the chat list expands inline within the tray - Open existing chats inline with no route remount via adoptResolvedChatId (now exposed from useChat), with hover-prefetch and the slide-in morph - Add a Codex-style chat title bar (title + action menu) to the open chat view - Make the right resource-panel collapse/expand a single stationary toggle outside the animating panel, so it no longer moves on collapse - Auto-hide the chat scrollbar; reveal it only while actively scrolling - Bump the home input corner radius to 17px Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…k, hover text reveal, dismiss-all Component (apps/sim/components/emcn/components/toast/toast.tsx): - Variants default/info/success/warning/error, each with a distinct outline icon (CircleAlert/TriangleAlert/CircleCheck/Info/Bell) rendered inline with the message in a neutral color — no badge; intent reads from icon + copy. - Stacking modeled on Sonner/Base-UI: a collapsed pile that fans open upward only when the cards are hovered. One fixed-duration expo-out tween drives all cards so rapid arrivals move in unison (no lagging card); cards arrive collapsed (expand is scoped to a wrapper around the cards, not the dismiss control). - Title vs subtext hierarchy: message is a medium, primary-color title; the optional description is lighter/smaller subtext. - Truncated text reveals its hidden lines on hover (RevealText): only the previously hidden lines blur in; the card height tracks the content so the action button stays pinned (no clipping). Larger bottom gradient fade hints at more text. - Concentric corner radius (16px = chip 8px + 8px padding); single-line cards use a tighter 12px so they don't read as pills. - Dismiss-all control: a small circular chip just outside the stack's bottom-left, shown at 2+ toasts. Linear auto-dismiss ring that restarts on each new arrival, pauses on hover, click to clear all; spring 'pop' entrance. - Bug fixes: route-scoped clearing (toasts no longer trail across navigation), dedup of the add/update double-fire, actionable toasts persist by default. Source/usage: - stores/terminal/console/store.ts: notifyBlockError now passes the block name as the title and the error as the description (title/subtext), plus the dedup window. - app/playground/page.tsx: Toast section added to the EMCN gallery. - New EMCN icons: circle-alert, circle-check, info, triangle-alert. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…llery tooling - New MessageCircle glyph in the emcn house style (24px viewBox, 1.55 stroke), filling a lucide-only gap from the audit; now used for the chat surfaces - Icon design worklist + lucide->emcn migration map docs for the redesign pass - render-icon-gallery script + generated gallery for side-by-side review Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…page wiring - Activity view components (agent identity, parallel agents, shimmer status) with model + tests, plus a standalone /activity-preview render harness - Chat resource persistence/types extended through the copilot contract, post handler, and resource tool handlers - Embedded pages (Tables, Knowledge, Integrations) accept open-callbacks so the chat resource panel can navigate within tabs instead of routing away - Chat history list extracted into a shared searchable, recency-bucketed component used by the All Chats tray and the title-bar switcher Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…anel design pass
Sidebar / chrome:
- Remove the sidebar's Chats section and the collapsed icon rail entirely;
collapsing now hides the menu to zero width and the content goes full-bleed
- Single SidebarToggle lives at the top-left of page title bars (both states);
hovering it while collapsed opens the menu as a popover-styled, content-fit
flyout anchored below the bar; clicking pins the sidebar open
- Flyout pins open while popups launched from it (workspace menu) are showing
- "New chat" nav item swaps the house icon for the new MessageCircle
Chat view:
- ChatTitleBar always renders (incl. new-chat view) with a "Chats / {title}"
breadcrumb switcher; close (x) hides the chat pane while the resource panel
takes full width and the switcher moves inline into the tabs bar
- ChatSwitcher promoted to a workspace-level control rendered on every page
header (Tables/Files/Knowledge/Scheduled/Logs via ResourceHeader) and
floating on the workflow canvas, so chats are reachable from anywhere
- Guardrails: chat pane restores when the resource panel closes; embedded
pages suppress duplicate chrome via SidebarToggleHidden context
Design pass:
- Resource tabs become ghost chips (30px, rounded-lg, active surface) in a
44px bar matching the chat title bar; icon buttons unified at 30px with
surface-active hover; 7px equal-distance edge insets for all pill controls
- Chat dropdown matches the flyout anchor rhythm (6px below bar, 8px inset);
emcn PopoverContent gains an alignOffset passthrough
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Fixed 44px bar (was padding-derived) with a unified 16px gutter across the breadcrumb and title-only variants - Sidebar toggle and right-edge actions pull out 9px so their hover pills sit 7px from the panel edge, equal to the pill's vertical clearance - Action/create buttons standardized to the 30px rounded-lg pill with surface-active hover, matching every other title-bar control Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…rumb group The sidebar toggle's 9px pull-out was clipped by the breadcrumb container's overflow-hidden; the toggle and chat switcher now sit beside it instead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
…pty state The home page's title chip fell back to the most recently updated chat; that fallback is now scoped to non-chat pages via an isNewChat flag the title bar sets whenever no chat is open. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Orchestration failures previously persisted nothing for the assistant turn — the post-stream history refetch then silently erased the streamed activity, leaving the user staring at their own message with no explanation. - withErrorContentBlock mirrors the cancelled-turn pattern: keeps partial content/tool blocks and appends an inline <mothership-error> tag (already understood by the message renderer) plus a terminal error-status block - Both failure paths persist: orchestration-returned failures keep their partial work; thrown errors persist a minimal errored turn Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…, never replace Switching chats no longer swaps the resource panel's tab set. Tabs now behave like browser tabs, owned by the user per workspace; chats relate to artifacts by provenance, not containment: - New persisted mothership-tabs store (tabs + active per workspace); entering a chat merges its artifacts additively (deduped) and focuses its last-touched one, never closing what's already open - Tabs the active chat surfaced carry a provenance dot (hidden on hover/active) - Closing/reordering tabs is session-only and no longer mutates the chat's persisted resources; closed tabs stay closed for the rest of the chat visit and re-open on re-entry - Manual attaches (+ dropdown, context chips) still record provenance on the open chat via the existing persistence path - Ephemeral resources (streaming previews) stay chat-scoped and unpersisted; panel expand/collapse + chat-pane guardrails now key off the strip Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… scroll the strip Horizontal trackpad swipes carry a small deltaY, so the deltaY-only handler preventDefault()'d the native pan and scrolled by the jitter amount instead. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…mpressed tabs, switcher dropdown The panel bar now mirrors the chat pane: one prominent identity chip per pane. - Active resource renders as a title chip (icon + full name + chevron) whose dropdown lists every open tab, grouped "From this chat" / "Other open tabs" with hover close controls — provenance moved here from the per-tab dots - Inactive tabs compress browser-style (max-width truncation, icon always visible); beyond five they collapse into a +N chip instead of scroll-clipping; the strip's scroll/edge-scroll machinery is gone - Dots now mean "changed while unfocused": a chat's artifacts merge in marked unseen except the focused one, and viewing or closing a tab clears it - Standalone pages (ResourceHeader, workflow canvas) demote the chat switcher to an icon-only chip so the page title owns the bar Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…y for the true remainder Replaces the fixed five-tab cap with measured capacity: the strip and the name-dependent title chip are observed (ResizeObserver, with a window-resize fallback), and whole tab slots are fitted into the remaining width. Zero-width measurements (panel collapsed or mid-expand-animation) are ignored so a bogus early measure can't collapse everything into the dropdown, and capacity starts permissive until the first trustworthy layout pass. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…down, +N lists only hidden tabs The all-tabs switcher dropdown duplicated the strip and made +N feel like a third concept. Now every tab lives in exactly one place: the active resource is a plain title chip, visible tabs switch by clicking, and the +N chip is the only dropdown, listing just the tabs that didn't fit. Selecting one promotes it to active, so it leaves the overflow naturally. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…asured width, overflow the rest Replaces the fixed 84px slot estimate (which squeezed labels even with room to spare) with real per-tab measurement: a hidden measuring row renders every inactive tab at natural width, and the capacity pass greedily fits whole tabs into the strip, sending only the true remainder to +N. Inline labels keep a 240px ceiling purely as a pathological-name guard, mirrored in measurement so render and fitting agree. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…lumbing Removes the unfocused-change indicator from inline tabs and switcher rows, along with the updatedTabKeys state, marking, and clearing in home. Also escapes a literal NUL byte that had crept into the namesKey join separator. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…between bars The pair rendered as loose children of each bar, inheriting whichever gap that bar used (gap-1 in the chat title bar, gap-1.5 in the tab strip, gap-2 in the resource header) — so the switcher drifted a couple of pixels when the chat pane closed or across pages. It now lives in its own gap-1 cluster everywhere, keeping the toggle at 7px and the switcher at 41px in every state. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ons the strip Drops the spotlight-first layout (clicking a tab yanked it to the left edge). Tabs now render in strip order with the active one highlighted where it sits. The width fit runs over the ordered list; if the active tab lands beyond the fit (e.g. picked from the +N dropdown), it surfaces at the end of the visible row with its width reserved, since it has no inline position to keep. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…'s chrome Container now keeps the popover's canonical 6px inset and rounded-xl instead of a p-0 override with its own 8px padding; rows drop to the canonical 13px text with the 2px row gap; the forced 240px min-width goes down to 180 so the dropdown hugs its content. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…used panel tab Selecting a chat from a resource page used to teleport to the chat view with whatever the strip last held — the one thing missing was the page you were on. The switcher now derives the page's resource from the pathname (page tabs for tables/knowledge/logs/scheduled-tasks, item tabs for table/KB/workflow detail routes), opens it focused in the workspace strip, and navigates with ?resource= pinned. The chat-entry merge respects that pin: a URL-pinned resource that isn't one of the chat's artifacts keeps focus instead of being displaced by the chat's most recent artifact. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…no reserved tab width Tabs carried a permanent 20px right padding for the hover ×, leaving dead space on idle tabs. The × now overlays the label's tail on hover, sitting on a gradient fade of the hover fill so it stays readable; idle tabs keep the chip's symmetric padding and their width never changes on hover. The hidden measuring row drops the same padding so fitting stays in sync. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…rive the panel again Asking the agent to "switch to Telecom_Leads_CRM" answered in prose but never moved the panel. use-chat still carried the old focus-on-touch logic via its internal setActiveResourceId, but the workspace tab-store migration orphaned that state — nothing rendered it. Adds an onResourceTouched(resource) callback fired at the three touch sites (stream resource ops, successful Read tool calls, workflow activation), regardless of whether the resource was already an artifact; home bridges it to the tab store with openTabs + focus, so the panel follows the conversation. File-streaming suppression is respected. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…clipping Wraps the message scroller in a relative container and overlays a 40px bottom strip — a bg gradient plus the faintest backdrop blur, both masked to ramp in toward the edge — so scrolled content dissolves above the input rather than cutting off at the scroller boundary. Applies to both chat layouts; pointer-events pass through. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replace the icon system with self-hosted Hugeicons (free, stroke-rounded) vendored into @/components/emcn/icons — zero runtime icon deps. - Vendor 150+ icons from @hugeicons/core-free-icons into the emcn barrel via scripts/hugeicons-map.ts + scripts/hugeicons-generate.ts (dev-only source). Icons gain a `size` prop; 4 bespoke animated icons (Loader, RefreshCw, Download, Layout) kept custom. - Migrate ~172 consumers off lucide-react to the emcn barrel; remove lucide-react dependency entirely (Github brand logo -> @/components/icons). - Fix chevron sizing: replace ~24 non-square classes (h-[6px] w-[10px], tuned to the dead 10x6 viewBox) with canonical size-[14px]. - Sidebar/chat icon updates: Table->TableIcon, knowledge base->DatabaseIcon, Files nav->File, scheduled tasks->CalendarClock, Logs->ThirdBracketSquare, PanelLeft/PanelRight, BubbleChatDelay/Spark for the two chat bubbles. - Send buttons -> ArrowUp02; integration row arrows -> ArrowRight02. - Workflow icon -> WorkflowSquare04; Integrations -> Plug02. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…et thumb The list scroller sat inside the panel's 8px gutter, so the full-width global scrollbar floated mid-panel and read as a fat dead column. The scroller now bleeds to the dropdown edge (-mx-2/px-2, the workspace dropdown's pattern) so the scrollbar occupies the former padding, and the thumb is clipped to a 4px pill inset 2px from the edge (transparent border + content-box clip), with scrollbar-width:thin for Firefox. Row alignment is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Replace the icon system with self-hosted Hugeicons (free, stroke-rounded) vendored into @/components/emcn/icons — zero runtime icon deps. - Vendor 150+ icons from @hugeicons/core-free-icons into the emcn barrel via scripts/hugeicons-map.ts + scripts/hugeicons-generate.ts (dev-only source). Icons gain a `size` prop; 4 bespoke animated icons (Loader, RefreshCw, Download, Layout) kept custom. - Migrate ~172 consumers off lucide-react to the emcn barrel; remove lucide-react dependency entirely (Github brand logo -> @/components/icons). - Fix chevron sizing: replace ~24 non-square classes (h-[6px] w-[10px], tuned to the dead 10x6 viewBox) with canonical size-[14px]. - Sidebar/chat icon updates: Table->TableIcon, knowledge base->DatabaseIcon, Files nav->File, scheduled tasks->CalendarClock, Logs->ThirdBracketSquare, PanelLeft/PanelRight, BubbleChatDelay/Spark for the two chat bubbles. - Send buttons -> ArrowUp02; integration row arrows -> ArrowRight02. - Workflow icon -> WorkflowSquare08; Integrations -> Plug02. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…osed The closed-chat double button is now the pattern everywhere: on the chat view with the pane hidden, the icon+title segment reopens the chat outright and the chevron opens Recents — same divider, same sibling hover wash as the icon-only split on resource pages and the workflow canvas. Hosts opt in via the new onOpenChat prop; the open-chat title bar keeps its single dropdown trigger. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…y only The stacked state is now two clean card panes over an opaque stage: a slim back-card bar showing just the workflow icon + name (no canvas, controls, or panel bleeding through the peek), and a fully rounded, inset front pane for the resource tabs. The back card sits narrower than the front for toast-stack depth and clicking it brings the editor forward; the editor stays mounted and live underneath throughout. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…ty bars The stack is no longer torn down when the workflow comes forward: flipping tucks the resource card into a small bottom-edge tab (active tab icon + name + a +N count) so both sides stay one click apart, with ?resource= persisting across flips. The workflow's back bar drops the grey fill for the page background and shrinks to a 30px visible band with a 12px icon and 12px title. Escape now flips instead of closing; only the card's × (or closing the last tab) dismantles the stack. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
In stacked-card mode the stage stops reading as a panel: the backdrop drops to the workspace chrome color (--surface-1) so only the two cards exist, and the chat pane detaches into its own module — full rounded corners, border, shadow, inset from the edges — matching the floating cards beside it. Editor- forward mode reverts everything to the flush panel layout. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The stacked cards floated inside the workspace chrome's bordered content card, which framed the whole composition in an outline. A new non-persisted isStageFloating flag on the sidebar store (set by the workflow shell while the stack is card-forward) tells the chrome to drop the content card's border/rounding and paint the backdrop in --surface-1, so the chat module and stack cards float directly on chrome space. The frame returns the moment the editor comes forward or the stack closes. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The chrome-frame flag now flips in a layout effect, so the content card's border drops in the same paint the floating cards appear — never a frame behind them mid-load. A deep link whose resource id resolves to nothing (not in the strip, not a page id) now collapses the stack immediately inside the restore instead of stranding an empty "add a resource" card — the auto-collapse effect can't catch that case since clearing the pending ref changes none of its deps. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…inks The store flag that drops the content card frame only flips after hydration, so server HTML and the whole streaming/loading window still showed the outer border around the floating cards. Until hydration the chrome now derives the answer from the URL (workflow route + ?resource=), which matches the workflow shell's own initial state by construction; after hydration the store is the single source, since replaceState URL changes are invisible to useSearchParams and would otherwise pin the frame off forever. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…up front Bringing the workflow forward no longer reverts to the flush panel layout: while the stack exists, the floating composition persists on both sides of the flip. The editor becomes the front card (rounded, inset, shadowed) above the tucked resource tab peeking from behind, the chat stays a detached module, and the chrome frame stays dropped. The card wrappers are permanent elements with toggled classes, so the editor never remounts across flips. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…tor card The editor-forward side of the flip now mirrors the resources-forward side exactly: the resource pane peeks as the same slim top identity bar (active tab icon + name + count) behind the editor's front card, replacing the bottom-corner tucked tab. The bar renders before the card in the DOM so the card paints over its lower half — true stacked depth from either direction. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The back identity bars sat at rounded-t-lg (8px) against the front cards' rounded-xl (12px) — mismatched radii on same-family stacked surfaces is the classic tell that something's off. Both bars now use rounded-t-xl, so the stack reads as the same card peeking from behind on either side of the flip. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The resize handles were invisible 8px strips — functional but undiscoverable. Both dividers (docked chat ↔ stage, chat ↔ resource panel) now fade in a 4x48px rounded grab pill on hover with a "Resize" tooltip, Claude-style. Idle state stays clean: no permanent line, drag behavior unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
In floating mode the drag zone now owns the visible 8px gap between the chat module and the front card — hover there shows the grab pill — instead of hugging the chat panel's right edge as in flush mode. The separator rides at z-40 so the stage's z-30 backdrop and cards can't swallow the hover or the drag. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 5 total unresolved issues (including 4 from previous reviews).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit ac8a357. Configure here.
With the chat closed and resources forward, the sidebar toggle and chat switcher lived in the editor's canvas chrome — buried under the stack's backdrop, leaving no way to open the sidebar or a chat. The front card's tab strip now doubles as the title bar in that state (same tabsLeading pattern as the chat view): toggle + split switcher lead the strip, the icon side docks the most recent chat in place, and the cluster hands off to the chat's title bar once a chat docks. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The flyout's fixed top-[50px] was tuned for the flush title bar; in floating-stage mode the toggle sits ~28px lower (under the peek bar, inside the front card), so the flyout covered the stack's identity bars and title. Position and max-height now follow the mode, keeping the peek bar and the toggle that opened it visible above the panel. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.

What this branch does
A design-engineering pass over the workspace shell: the sidebar, chat, and resource panel now behave as one coherent surface — chat is reachable from every page, the panel is a workspace-owned tab strip, and the chrome follows a single spacing system.
Highlights
Workspace-owned tab strip (browser-tab semantics)
+Ndropdown that lists only the hidden tabs. Selecting from+Npromotes the tab into the visible row.Chat everywhere
Sidebar collapse
Design system pass
Sync
origin/main(136 commits, v0.7.3) into the branch.🤖 Generated with Claude Code